import React from 'react';
import {Button,Input, Space } from 'antd';
import { AudioOutlined } from '@ant-design/icons';

const GuaShi = () => {
  const { Search } = Input;
  const onSearch = value => console.log(value);


    return (
      <>
        {/*挂失 */}
          <h2>挂失</h2>
          <Space direction="vertical">
          <Search placeholder="身份证号" onSearch={onSearch} style={{ width: 200,marginLeft:"240px" }} /> 
          </Space>
          <div style={{overflow:'hidden'}}>
            <div style={{float:'left',marginLeft:"220px"}}>
             <div style={{margin:"20px"}}><span>卡号 : </span><input ></input>
             <Button type="primary"  style={{margin:"5px"}}>补办</Button>
             </div>  
             <div style={{margin:"20px"}}><span>姓名 : </span><input ></input></div>            
             <div style={{margin:"20px"}}><span>余额 : </span><input ></input></div>
             <div style={{margin:"20px"}}><span>身份证 : </span><input ></input></div>
            </div>
            <div style={{float:'left',marginLeft:"10px"}}>
             <div style={{margin:"20px"}}><span>类型 : </span><input ></input></div>
             <div style={{margin:"20px"}}><span>性别 : </span><input ></input></div>
             <div style={{margin:"20px"}}><span>电话 : </span><input ></input></div>
            </div>                         
          </div>    
          <div style={{marginLeft:"240px"}}><span>地址:</span><input style={{width:'450px',height:'40px'}} ></input></div>
          <Button type="primary" shape="round" style={{margin:'20px 0 0 450px'}}>确认</Button>   
      
      </>
    );
}

export default GuaShi;
